@model int
<div class="comment-form">
    <h3>Leave a Reply</h3>
    <div class="form-container">
        @using (Html.BeginForm("AddComment", "Content", new { ContentID = Model }, FormMethod.Post, new { id = "comment-form" }))
        {
            @Html.AntiForgeryToken()


    <input type="text" id="username" name="username" class="text-input wd100per padtop20" placeholder="Your name *" />
                   <br />
    <input type="text" id="Website" name="Website" class="text-input wd100per padtop20 email" placeholder="URL" />

                         <br />
    <textarea id="CommentDescription" name="CommentDescription" class="text-area padtop20 wd100per " rows="7" placeholder="Comments *"></textarea>
                     <br />
    <div style="width:73%;padding-top:10px;">
        <div style="float:left;">
            <label style="display: inline;">Comment as:</label>
        </div>
        <div style="float:left;padding-left:10px">
            <select id="CommentAs" name="CommentAs" class="five smoothborder wd100per padtop20" style="display: inline; width: 140px">
                <option value="google">Google Account</option>
                <option value="nameurl">Name/URL</option>
                <option value="anonymous">Anonymous</option>
            </select>
        </div>
            @Html.Hidden("ProfilePicUrl")
        <div style="float:right;">
            <button type="submit" class="readmore" id="postcomment">Publish</button>
        </div>
        </div>
        }

                <div class="displaynone">
                    <div id="sk-comment-signin"></div>
                </div>

                <div class="response"></div>
</div>
</div>
<style>
    .displaynone {
        display: none !important;
    }
    .wd100per {
    width:500px;
    }
    .padtop20 {
        margin-top: 12px;
        line-height: 23px;
        padding: 5px;
    }
</style>

<script>
    var isCommentSubmit = false;
    $(document).ready(function () {
        $("#CommentAs").click(function (evt) {
            $("#username").addClass("displaynone");
            $("#Website").addClass("displaynone");
            $("#username").val("")
            $("#Website").val("");
            if ($(this).val() == "nameurl")
            {
                $("#username").removeClass("displaynone");
                $("#Website").removeClass("displaynone");
            }
        });
        $("#postcomment").click(function (e) {
            var isvalid = true;
            if ($("#CommentDescription").val().trim() == "") {
                alert("Comment is required");
                isvalid = false;
            }
            else if ($("#CommentAs").val() == "google") {
                if ($("#username").val().trim() == "") {
                    isvalid = false;
                    isCommentSubmit = true;
                    $("#sk-comment-signin").find(".abcRioButton").click(); // google authentication
                }
            }
            else if ($("#CommentAs").val() == "nameurl") {
                if ($("#username").val().trim() == "") {
                    alert("Name required");
                    isvalid = false;
                }
            }
            if (isvalid)
                return true;
            else
                return false;
        });
    });

    function onCommentSuccess(googleUser) {
        $("#username").val(googleUser.getBasicProfile().getName());
        $("#ProfilePicUrl").val(googleUser.getBasicProfile().getImageUrl());
        if (isCommentSubmit == true) {
            isCommentSubmit = false;
            $("#postcomment").trigger("click");
        }
    }
    function onCommentFailure(error) {
        alert(error);
    }
    function renderCommentGoogleButton() {
        gapi.signin2.render('sk-comment-signin', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': onCommentSuccess,
            'onfailure': onCommentFailure
        });
    }
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderCommentGoogleButton" async defer></script>

<script>
    @if (TempData["comment-added"] != null)
    {
        @: alert("Your comment is added. we will review and it add. :)");
        }
    @if (TempData["comment-error"] != null)
    {
        @: alert("@((String)TempData["comment-error"])");
        }
</script>

@*<form class="forms cform" action="#" method="post">
    <fieldset>
        <ol>
            <li class="form-row text-input-row">
                <label>Name</label>
                <input type="text" name="name" value="" class="text-input required" title="" />
            </li>
            <li class="form-row text-input-row">
                <label>Email</label>
                <input type="text" name="email" value="" class="text-input required email" title="" />
            </li>
            <li class="form-row text-area-row">
                <label>Message</label>
                <textarea name="message" class="text-area required"></textarea>
            </li>
            <li class="form-row hidden-row">
                <input type="hidden" name="hidden" value="" />
            </li>
            <li class="button-row">
                <input type="submit" value="Submit" name="submit" class="btn-submit" />
            </li>
        </ol>
        <input type="hidden" name="v_error" id="v-error" value="Required" />
        <input type="hidden" name="v_email" id="v-email" value="Enter a valid email" />
    </fieldset>
</form>*@
